<template>
  <div class="app-service-center-content-monitor__center__tomato" v-show="show">
    <div class="app-service-center-content-monitor__center__tomato__left-part">
      <div class="app-service-center-content-monitor__center__tomato__left-part__top-part" ref="leftTop"></div>
      <div class="app-service-center-content-monitor__center__tomato__left-part__bottom-part" ref="leftBottom"></div>
    </div>
    <div class="app-service-center-content-monitor__center__tomato__right-part">
      <div class="app-service-center-content-monitor__center__tomato__right-part__top-part" ref="rightTop"></div>
      <div class="app-service-center-content-monitor__center__tomato__right-part__bottom-part" ref="rightBottom">
        <t-table :items="tableData" size="mini" border stripe>
          <t-table-column label="番茄项目" prop="name" id="0" width="4"></t-table-column>
          <t-table-column label="今日" prop="today" id="1" width="2"></t-table-column>
          <t-table-column label="总量" prop="total" id="2" width="2"></t-table-column>
        </t-table>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';

  export default {
    name: 'app-service-center-content-monitor-tomato',
    components: {
      TTable,
      TTableColumn,
    },
    props: {
      toms: Object,
      show: Boolean,
    },
    data() {
      return {
        tableData: [{
          name: '习惯番茄',
          today: '0 颗',
          total: '0 颗',
        }, {
          name: '专题番茄',
          today: '0 颗',
          total: '0 颗',
        }, {
          name: '合计',
          today: '0 颗',
          total: '0 颗',
        }],
        totalInstance: null,
        totalOption: {
          title: {
            text: '番茄总量',
            subtext: '0 颗',
            x: 'center',
            y: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          calculable: true,
          series: [{
            name: '番茄来源',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '50%'],
            data: [],
          }],
        },
        mHabitInstance: null,
        mHabitOption: {
          title: {
            text: '微习惯番茄',
            subtext: '185颗',
            x: 'center',
            y: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          calculable: true,
          series: [{
            name: '番茄来源',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '50%'],
            data: [],
          }],
        },
        mTopicInstance: null,
        mTopicOption: {
          title: {
            text: '微专题番茄',
            subtext: '1021颗',
            x: 'center',
            y: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          calculable: true,
          series: [{
            name: '番茄来源',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '50%'],
            data: [],
          }],
        },
      };
    },
    created() {
      this.$eventHub.$on('resize', () => {
        this.handleResize();
      });
    },
    watch: {
      toms(val) {
        this.tableData[0].total = `${val.accountTomatoState.habitTomatoAmount} 颗`;
        this.tableData[0].today = `${val.accountTomatoState.habitTodayTomatoAmount} 颗`;
        this.tableData[1].total = `${val.accountTomatoState.topicTomatoAmount} 颗`;
        this.tableData[1].today = `${val.accountTomatoState.topicTodayTomatoAmount} 颗`;
        this.tableData[2].today = `${val.accountTomatoState.todayTomatoAmount} 颗`;
        this.tableData[2].total = `${val.accountTomatoState.tomatoAmount} 颗`;
        // val.perfectTomatoAmount;
        this.totalOption.title.subtext = `${val.accountTomatoState.tomatoAmount} 颗`;
        this.totalOption.series[0].data.push({ value: val.accountTomatoState.habitTomatoAmount, name: '微习惯番茄' });
        this.totalOption.series[0].data.push({ value: val.accountTomatoState.topicTomatoAmount, name: '微专题番茄' });
        this.mTopicOption.title.subtext = `${val.accountTomatoState.topicTomatoAmount} 颗`;
        Object.values(this.toms.topicTomatoStates).forEach((item) => {
          this.mTopicOption.series[0].data.push({ value: item.tomatoAmount, name: item.name });
        });
        this.mHabitOption.title.subtext = `${val.accountTomatoState.habitTomatoAmount} 颗`;
        Object.values(this.toms.habitTomatoStates).forEach((item) => {
          this.mHabitOption.series[0].data.push({ value: item.tomatoAmount, name: item.name });
        });
        this.handleUpdate();
      },
      show(val) {
        if (val) {
          this.handleResize();
        }
      },
    },
    methods: {
      handleResize() {
        if (this.totalInstance && this.$refs.leftTop) {
          window.setTimeout(() => {
            const width = window.getComputedStyle(this.$refs.leftTop).width;
            const height = window.getComputedStyle(this.$refs.leftTop).height;
            this.totalInstance.resize(parseInt(width, 10), parseInt(height, 10));
          }, 250);
        }
        if (this.mHabitInstance && this.$refs.leftBottom) {
          window.setTimeout(() => {
            const width = window.getComputedStyle(this.$refs.leftBottom).width;
            const height = window.getComputedStyle(this.$refs.leftBottom).height;
            this.mHabitInstance.resize(parseInt(width, 10), parseInt(height, 10));
          }, 250);
        }
        if (this.mTopicInstance && this.$refs.rightTop) {
          window.setTimeout(() => {
            const width = window.getComputedStyle(this.$refs.rightTop).width;
            const height = window.getComputedStyle(this.$refs.rightTop).height;
            this.mTopicInstance.resize(parseInt(width, 10), parseInt(height, 10));
          }, 250);
        }
      },
      handleUpdate() {
        window.setTimeout(() => {
          this.totalInstance = echarts.init(this.$refs.leftTop);
          this.totalInstance.setOption(this.totalOption);
          this.mHabitInstance = echarts.init(this.$refs.leftBottom);
          this.mHabitInstance.setOption(this.mHabitOption);
          this.mTopicInstance = echarts.init(this.$refs.rightTop);
          this.mTopicInstance.setOption(this.mTopicOption);
        }, 250);
      },
    },
  };
</script>